<template>
  <div>
    <div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
      <sidebar class="sidebar-container"></sidebar>
      <div class="main-container">
        <navbar :show-add="showAdd">

        </navbar>
        <section class="app-main">
          <transition name="fade" mode="out-in">
            <router-view></router-view>
          </transition>
        </section>
      </div>
    </div>

  </div>
</template>

<script>
  import {mapGetters} from 'vuex';
  import {Navbar, Sidebar, AppMain} from '@/components/layout';

  export default {

    name: 'layout',
    components: {
      Navbar,
      Sidebar,
      AppMain
    },
    computed: {
      ...mapGetters([
        'sidebar'
      ]),
      showAdd() {
        return this.$route.meta && this.$route.meta.showAdd === true;
      }
    }
  };
</script>

<style type="text/scss" lang="scss" scoped>
  @import "../styles/mixin";

  .app-wrapper {
    @include clearfix;
    position: relative;
    width: 100%;
    height: 100%;
  }
</style>
